<template>
  <div id="root">
     <div class="left">
         <div v-for="item in ques" :key="item.id">
             <h4>{{item.id+"."+item.title}}</h4>
             <p>{{item.content}}</p>
             <a href="javascript:;" v-for="(point,index) in item.points" :key="index">{{point}} | </a>
             <span>查看详情</span>
             <span @click="myStore(item)">点击收藏</span>
         </div>
     </div>
     <div class="right">
         <h5>大家都在做</h5>
         <hr/>
         <div v-for="item in ques2" :key="item.id">
             <h4>{{item.id+"."+item.title}}</h4>
             <p>{{item.content}}</p>
             <a href="javascript:;" v-for="(point,index) in item.points" :key="index">{{point}} | </a>
             <span>查看详情</span>
             <hr/>
         </div>
     </div>
  </div>
</template>

<style scoped lang="less">
*{
    box-sizing: border-box;
}
#root {
    width: 100%;
    display: flex;
    flex-direction: row;
    .left{
        flex: 2;
        margin-right: 20px;
        font-size: 15px;
        div {
            padding: 5px;
            border: 1px solid gray;
            margin: 5px 0px;
            background-color: #fff;
            border-radius: 10px;
        }
        p{
            width: 100%;
            overflow: hidden;
        }
        span{
            float: right;
            margin: 0px 5px;
            &:hover {
                color: red;
                cursor: pointer;
            }
        }
    }
    .right {
        flex: 1;
        background-color: #fff;
        padding: 0px 5px;
        font-size: 12px;
        div {
            padding: 4px;
            margin: 5px 0px;
            background-color: #fff;
            border-radius: 10px;
        }
        p{
            width: 100%;
            overflow: hidden;
        }
        span{
            float: right;
            margin: 0px 5px;
            &:hover {
                color: red;
                cursor: pointer;
            }
        }
    }
    a{
        color: deeppink;
    }
}

</style>

<script>
export default {
    methods:{
        myStore(data){
            let flag=0;
            this.$store.state.myQues.myStoreData.forEach(element => {
                if(element.id==data.id){
                    flag=1;
                    return;
                }
            });
            if(flag==0){
            this.$message({
                message: "收藏成功，请在我的收藏中查看",
                type: "success",
                duration:1000,
                showClose:true
             });
             this.$store.state.myQues.myStoreData.push(data);
             console.log(this.$store.state.myQues.myStoreData)
            }
            else {
                this.$message({
                        message: "不允许重复收藏",
                        type: "warning",
                        duration:1000,
                        showClose:true
                    });
            }
        }
    },
    data() {
        return {
            ques:[
                {
                    id:1,
                    title:'练习WPS',
                    content:'没有什么是一成不变的。生活就像自然，有阳春，也有金秋；有酷夏，也有寒冬。走运和倒霉都不可能持续很久。',
                    points:['知识点1','知识点2','知识点3','知识点4']
                },
                {
                    id:2,
                    title:'马克思主义',
                    content:'没有什么是一成不变的。生活就像自然，有阳春，也有金秋；有酷夏，也有寒冬。走运和倒霉都不可能持续很久。',
                    points:['知识点1','知识点2','知识点3','知识点4']
                },
                {
                    id:3,
                    title:'中国近代史',
                    content:'没有什么是一成不变的。生活就像自然，有阳春，也有金秋；有酷夏，也有寒冬。走运和倒霉都不可能持续很久。',
                    points:['知识点1','知识点2','知识点3','知识点4']
                },
                {
                    id:4,
                    title:'思修',
                    content:'没有什么是一成不变的。生活就像自然，有阳春，也有金秋；有酷夏，也有寒冬。走运和倒霉都不可能持续很久。',
                    points:['知识点1','知识点2','知识点3','知识点4']
                }
            ],
            ques2:[
                {
                    id:1,
                    title:'练习WPS',
                    content:'也有寒冬。走运和倒霉都不可能持续很久。',
                    points:['知识点1','知识点2','知识点3','知识点4']
                },
                {
                    id:2,
                    title:'马克思主义',
                    content:'也有金秋；也有寒冬。走运和倒霉都不可能持续很久。',
                    points:['知识点1','知识点2','知识点3','知识点4']
                },
                {
                    id:3,
                    title:'中国近代史',
                    content:'有酷夏，也有寒冬。走运和倒霉都不可能持续很久。',
                    points:['知识点1','知识点2','知识点3','知识点4']
                },
                {
                    id:4,
                    title:'思修',
                    content:'没有什么是一成不变的。倒霉不可能持续很久。',
                    points:['知识点1','知识点2','知识点3','知识点4']
                }
            ]
        }
    },
}
</script>

